Use modal dialogs for expense creation & edition (#10)

* First attemps at using route interception and modals

* Remove route interception

* Make it work

* Use Vaul on small screens

* Improve vaul

1 files changed, 4 insertions, 1 deletions

diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx
index 3e649e7..40f6155 100644
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/src/app/groups/[groupId]/layout.tsx
@@ -5,12 +5,13 @@ import { getGroup } from '@/lib/api'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 
 type Props = {
   params: {
     groupId: string
   }
+  modal: ReactNode
 }
 
 export async function generateMetadata({
@@ -28,6 +29,7 @@ export async function generateMetadata({
 
 export default async function GroupLayout({
   children,
+  modal,
   params: { groupId },
 }: PropsWithChildren<Props>) {
   const group = await getGroup(groupId)
@@ -47,6 +49,7 @@ export default async function GroupLayout({
       </div>
 
       {children}
+      {modal}
 
       <SaveGroupLocally group={{ id: group.id, name: group.name }} />
     </>